<!--
 * @Author: 薛严 348352046@qq.com
 * @Date: 2023-04-07 11:56:20
 * @LastEditors: 薛严 348352046@qq.com
 * @LastEditTime: 2023-06-01 18:19:53
 * @FilePath: /ift-file-md5/src/components/HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from "vue";
import { getFileSignature, getFilesMd5, } from "ift-util";
// import { getFileSignature, getFilesMd5 } from "./test";

const imgsrc = ref("https://img.yzcdn.cn/vant/cat.jpeg");
const imgsrcs = ref([])
const color = ref("white");

// 单文件上传
async function singleChange(e) {
  const file = e.target.files[0];
  // const fileType = file.name.split(".")[1];
  const fileType = file.name.slice(file.name.lastIndexOf('.') + 1);
  const r = await getFileSignature(file, fileType);
  console.log(r);
  const form = new FormData();
  form.append("file", file)
  let options = getOption(r, form)
  const url =
    "https://dev-ftecard.aijiatui.com/gov-file-upload/security/single-upload";
  const res = await fetch(url, options);
  const data = await res.json();
  console.log(data.data.fileUrls[0]);
  imgsrc.value = data.data.fileUrls[0];
  return { imgsrc };
}
function toggleColor() {
  color.value = color.value === "white" ? "red" : "white";
}
// 多文件上传
async function multipleChange(e) {
  const files = e.target.files;
  // const fileType = files[0].name.split(".")[1];
  const fileType = file.name.slice(file.name.lastIndexOf('.') + 1);
  // const md5 = await hashFile(file).md5
  const md5 = await  getFilesMd5(files) 
  console.log(md5);
  const r = await getFileSignature("", fileType, md5);
  console.log(r);
  const form = new FormData();
  const temp = []
  for (const file of files) {
    form.append("files", file)
  }
  // form.append("files", files)
  form.append("fileType", fileType);
  console.log(md5);
  let options = getOption(r, form)
  const url =
    "https://dev-ftecard.aijiatui.com/gov-file-upload/security/batch-upload";
  const res = await fetch(url, options);
  const data = await res.json();
  console.log(data.data.fileUrls);
  imgsrcs.value = data.data.fileUrls;
  return { imgsrc };
}
// 获取多个文件md5
// async  function getFilesMd5(files) {
//     let md5= null
//     for (const file of files) {
//       const r = await hashFile(file);
//       md5 = md5 ? ( md5+ r.md5) :  r.md5 
//     }
//     return md5
// }
// 获取请求配置
function getOption(r,form){
return  {
    headers: {
      "i-token": "5224007762e345dd8aef9d9176817775",
      "i-log-endPoint": "docking", // 不加密
      "ifutian-timestamp": r["ifutian-timestamp"],
      "ifutian-nonce": r["ifutian-nonce"],
      "ifutian-signature": r["ifutian-signature"],
      // "i-temp-izone": "mq",
    }, // 设置请求头
    method: "post",
    body: form,
  };
}
</script>

<template>
  <!-- 样式绑定也支持对象和数组 -->
  <p :style="{ color }" @click="toggleColor">{{ imgsrc }}</p>
  <div>
    <img   style="height: 10rem" :src="imgsrc" alt="图片" />
    <input type="file" name="选择文件" @change="singleChange" />
  </div>
  <div style="margin-top: 100px">
    <img v-for="(item, index)  in  imgsrcs" :key="index"  style="height: 10rem" :src="item" alt="图片" />
    选择多个文件
    <input
      type="file"
      multiple="multiple"
      name="选择多个文件"
      @change="multipleChange"
    />
  </div>
</template>
